<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      搜索组件-->
      <SearchModle dataKey="cornerIndex" @searchFn="searchFn"></SearchModle>
      <el-button type="primary" @click.native="addActive()" size="small" class="mb-10">添加区角</el-button>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableoption.tableStripe"
              :border="tableoption.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="id"
                label="ID"
                width="50">
            </el-table-column>
            <el-table-column
                label="现场图片"
                width="100">
              <template slot-scope="scope">
                <!--                <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
                <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="区角名称">
            </el-table-column>
            <el-table-column
                prop="description"
                label="设置目标"
                width="160">
            </el-table-column>
            <el-table-column
                label="现场位置">
              <template slot-scope="scope">
                <span
                    v-if="scope.row.section">{{ scope.row.section ? scope.row.section.section_name : '' }}{{
                    scope.row.classes ? scope.row.classes.class_name : ''
                  }}</span>
                <span v-else>{{ scope.row.public_name }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--                label="识别范围"-->
            <!--                width="80">-->
            <!--              <template slot-scope="scope">-->
            <!--                <span v-if="scope.row.facility">{{ minrssi[scope.row.facility.scope] }}米</span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column-->
            <!--                prop="time"-->
            <!--                label="达标时长">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.time }}分钟-->
            <!--              </template>-->
            <!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                prop="classes"-->
<!--                label="展示时间"-->
<!--                width="120">-->
<!--              <template slot-scope="scope">-->
<!--                <el-select v-model="scope.row.type" placeholder="请选择" size="mini" class="w-100">-->
<!--                  <el-option-->
<!--                      v-for="item in options"-->
<!--                      :key="item.id"-->
<!--                      :label="item.name"-->
<!--                      :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column
                prop="classes"
                label="架构人">
              <template slot-scope="scope">
                {{ scope.row.user ? scope.row.user.realname : '' }}
              </template>
            </el-table-column>
            <el-table-column
                prop="classes"
                label="状态"
                width="80">
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.switchvalue"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchChange(scope.$index)">
                </el-switch>
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--                prop="create_time"-->
            <!--                label="添加时间"-->
            <!--                width="120">-->
            <!--            </el-table-column>-->
            <el-table-column
                label="操作"
                width="140">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand" trigger="click">
                  <el-button type="primary" size="mini">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="4+'-'+scope.$index">区角编辑</el-dropdown-item>
                    <el-dropdown-item :command="1+'-'+scope.$index">查询预约</el-dropdown-item>
                    <el-dropdown-item :command="2+'-'+scope.$index">视频采集</el-dropdown-item>
                    <el-dropdown-item :command="3+'-'+scope.$index">视频记录</el-dropdown-item>
                    <el-dropdown-item :command="99+'-'+scope.$index">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <cornerAdmin :visible.sync="queryCorner.cornerVisible" :userOption="queryCorner.userInfo"></cornerAdmin>
      <getNewVideo :visible.sync="videoVisible" :cornerVideoId="cornerVideoId" :connerName="connerName"></getNewVideo>
      <CornerEditPover :visible.sync="cornerEidtVisible" :cornerId="cornerId" @InitFn="InitFn"></CornerEditPover>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js';
import CornerEditPover from "./CornerEditPover";

export default {
  components: {
    CornerEditPover
  },
  data() {
    return {
      switchvalue: true,
      searchsectionId: '',
      searchclassesId: '',
      tableList: [],
      cornerEidtVisible: false,
      cornerId: 0,
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      cornertype: true,
      cornername: 0,
      cornerList: [
        {
          id: 0,
          name: '全部'
        },
        {
          id: 1,
          name: '教室区角'
        },
        {
          id: 2,
          name: '公共区角'
        }
      ],
      first_id: '',
      arryList: [], // 数据列表
      // 搜索
      searWord: {
        name: '',
        real_name: '',
        section_id: '',
        class_id: ''
      },
      // 弹窗
      dialogVisible: false,
      editIndex: null,
      foodOption: '',
      // 预览
      imgsrcCheck: '',
      dialogImgVisible: false,
      classesListNew: [],
      sectionList: [],
      classesList: [],
      queryCorner: {
        cornerVisible: false,
        userInfo: null
      },
      videoVisible: false,
      cornerVideoId: 0,
      connerName: '',
      minrssi: {
        "-127": 0,
        "-51": 0.5,
        "-60": 1,
        "-63": 2,
        "-66": 3,
        "-68": 4,
        "-70": 5,
        "-72": 6,
        "-74": 7,
        "-76": 8,
        "-78": 9,
        "-80": 10,
        "-82": 11,
        "-84": 12,
        "-86": 13,
        "-88": 14,
        "-90": 15
      },
      options: [{
        id: '1',
        name: '全天'
      }, {
        id: '2',
        name: '上午'
      }, {
        id: '3',
        name: '下午'
      }],
      searchForm: {} // 搜索参数
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      this.searchForm.p = this.page.pageindex
      let data = await this.$fetch(this.api.admin_corner_index, this.searchForm)
      if (!data.code) {
        // status 0关闭 1开启 switchvalue
        let array_ = []
        for (let i in data.list.data) {
          data.list.data[i].create_time = data.list.data[i].create_time.split(' ')[0]
          let switchvalue = false
          if (data.list.data[i].status === 1) {
            switchvalue = true
          }
          data.list.data[i].switchvalue = switchvalue
          array_.push(data.list.data[i])
        }
        this.arryList = array_
        this.page.total = data.list.total
      } else {
      }
    },
    // 开启关闭 区角
    switchChange(index) {
      console.log(index, this.arryList[index].switchvalue) // arryList
      let url_ = this.api.admin_corner_forbid // 禁用
      if (this.arryList[index].switchvalue) {
        url_ = this.api.admin_corner_resume // 启用
      }
      this.$post(url_, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleDetel(index) {
      let this_ = this
      this.$confirm('此操作将永久删除 ' + this.arryList[index].name + ' 区角, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        this_.deletFn(index)
      }).catch(() => {
      })
    },
    deletFn(index) {
      this.$post(this.api.admin_corner_delete, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    addActive() {
      this.cornerId = 0;
      this.cornerEidtVisible = true;
    },
    handleCommand(command) {
      // 获取到的参数内容
      // 删除 handleDetel
      let command_ = command.split('-')
      if (Number(command_[0]) === 1) {
        this.queryCorner.userInfo = this.arryList[command_[1]]
        this.queryCorner.cornerVisible = true
      }
      // 视频采集
      if (Number(command_[0]) === 2) {
        this.cornerVideoId = this.arryList[command_[1]].id
        this.connerName = this.arryList[command_[1]].name
        this.videoVisible = true
      }
      // 视频记录
      if (Number(command_[0]) === 3) {
        this.$router.push('/videoList?editId=' + this.arryList[command_[1]].id + '&name=' + this.arryList[command_[1]].name)
      }
      if (Number(command_[0]) === 4) {
        this.cornerId = this.arryList[command_[1]].id
        this.cornerEidtVisible = true
      }
      if (Number(command_[0]) === 99) {
        this.handleDetel(command_[1])
      }
    },
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
  },
  mounted() {
  },
}
</script>
<style>
</style>
